<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html>
<html>
<head>
	<title>查看他人作品</title>
	<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,uer-scalable=no" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link href="../photoswipe/styles.css" type="text/css" rel="stylesheet" />
	
	<link href="../photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript" src="../photoswipe/lib/klass.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="../photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
	
	
	<script type="text/javascript">

	var options = {loop:false};
	var instance;
	(function(window, $, PhotoSwipe){
		$(document).ready(function(){
			$("#loadB").bind("click",loadDatas);
			//bindPhotoSwipe();
		});
		
		/*
			初始化photoSwipe
		*/
		function bindPhotoSwipe(){
				instance = $("#Gallery a").photoSwipe(options);
				var size = $("#Gallery a").length;
				// onDisplayImage
				instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
					console.log('onDisplayImage{');
					console.log('onDisplayImage - e.action = ' + e.action);
					console.log('onDisplayImage - e.index = ' + e.index);
					console.log(instance.getCurrentImage());
					console.log('onDisplayImage}');
				
					if(e.index==size-1){
						//到了最后一张图片加载更多数据					
							alert("加载更多照片...");
							detatch();
							loadDatas();	
							instance.show(e.index);
						
					}
				});
						
		}	
		/*
			加载数据
		*/
	   function loadDatas(){
			
		   $.ajax({
				url: "./photographer_more",
				dataType: "json",
				data: "lastId=" + encodeURI($("#lastId").val()),
				async: false,
				success: function(data) {
					for(var i=0; i<data.photos.length; i++) {
						$("#Gallery").append("<li><a href=\""+data.photos[i].photoDetailUrl+"\"><img src=\""+data.photos[i].saveThumb+"\" alt=\""+data.photos[i].photoTitle+"#"+data.photos[i].photoDesc+"\" /></a></li>");
					}
					$("#lastId").val(data.lastId);
				},
				error: function(err) {
					alert("抱歉，我们遇到一点问题，请稍后再试。");
				}
			});
			//bindPhotoSwipe();
		}
		/*
			解绑
		*/
		function detatch(){
			PhotoSwipe.detatch(instance);
			PhotoSwipe.activeInstances = [];	
		}
		
	}(window, window.jQuery, window.Code.PhotoSwipe));
		
	</script>
	
</head>
<body>

<div id="Header">
	<img src="http://static.hutiao.me/test/3.0.5/examples/images/top.gif" width="230" height="48" alt="Code Computerlove" />
</div>

<div id="MainContent">

	<div class="page-content">
		<h1>查看他人作品</h1>
	</div>
	
	<ul id="Gallery" class="gallery">
		<!-- 
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/001.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/001.jpg" alt="Image 001" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/002.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/002.jpg" alt="Image 002" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/003.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/003.jpg" alt="Image 003" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/004.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/004.jpg" alt="Image 004" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/005.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/005.jpg" alt="Image 005" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/006.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/006.jpg" alt="Image 006" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/007.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/007.jpg" alt="Image 007" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/008.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/008.jpg" alt="Image 008" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/009.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/009.jpg" alt="Image 009" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/010.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/010.jpg" alt="Image 010" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/011.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/011.jpg" alt="Image 011" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/012.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/012.jpg" alt="Image 012" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/013.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/013.jpg" alt="Image 013" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/014.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/014.jpg" alt="Image 014" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/015.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/015.jpg" alt="Image 015" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/016.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/016.jpg" alt="Image 016" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/017.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/017.jpg" alt="Image 017" /></a></li>
		<li><a href="http://static.hutiao.me/test/3.0.5/examples/images/full/018.jpg"><img src="http://static.hutiao.me/test/3.0.5/examples/images/thumb/018.jpg" alt="Image 018" /></a></li>
		-->
		<s:iterator value="photos" id="array">
            <li><a href="<s:property value='photoDetailUrl'/>"><img src="<s:property value='saveThumb'/>" alt="<s:property value='photoTitle'/>#<s:property value='photoDesc'/>" /></a></li>
        </s:iterator>
        <s:hidden name="lastId" />
	</ul>
	
</div>	

	
<div id="Footer">
	<p><button id="loadB">加载更多&gt;&gt;</button></p>
	<p><small>&copy; 华润雪花啤酒(武汉)有限公司</small></p>
</div>

</body>
</html>